<template>
  <div class="main">
    <div id="sandian"></div>
    <div id="zhexian"></div>
    <div id="bingtu"></div>
    <div id="kxiantu"></div>
    <div id="leidatu"></div>
    <div id="hexutu"></div>
    <div id="zhuzhuang"></div>
    <div id="guanxitu"></div>
    <div id="xuritu"></div>
    <div id="sangshentu"></div>
    <div id="yibiaotu"></div>
    <div id="jiazaidonghuatu"></div>
  </div>
</template>

<script>
import {
  zhuzhuagntu,
  zhexian,
  bingtu,
  sandian,
  kxiantu,
  leidatu,
  hexutu,
  guanxitu,
  xuritu,
  sangshentu,
  yibiaotu,
  jiazaidonghuatu,
} from "./config";
export default {
  mounted() {
    sandian(document.querySelector("#sandian"));
    zhexian(document.querySelector("#zhexian"));
    bingtu(document.querySelector("#bingtu"));
    kxiantu(document.querySelector("#kxiantu"));
    leidatu(document.querySelector("#leidatu"));
    zhuzhuagntu(document.querySelector("#zhuzhuang"));
    hexutu(document.querySelector("#hexutu"));
    guanxitu(document.querySelector("#guanxitu"));
    xuritu(document.querySelector("#xuritu"));
    sangshentu(document.querySelector("#sangshentu"));
    yibiaotu(document.querySelector("#yibiaotu"));
    jiazaidonghuatu(document.querySelector("#jiazaidonghuatu"));
  },
};
</script>
<style lang="less" scoped>
.main {
  display: grid; // 声明一个容器
  grid-template-columns: repeat(3, 1fr); //分成三栏，每栏均等分
  grid-gap: 10px 20px; //行间距 列间距

  div {
    width: 500px;
    height: 250px;
  }
}
</style>